<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>家乡情怀</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery-3.6.0.min.js"></script>
    <script src="./bootstrap/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
<!--    bootstrap -->
	<script src="./js/jquery.min.js"></script>
	<script type="text/javascript" src="./js/style.js"></script>
	<link rel="stylesheet" href="./css/style.css">

</head>
<body>
    <!--Photoshop、Flash和Dreamweaver工具的综合应用
    ，使用Dreamweaver设计制作主题网站，突出主题，内容丰富，信息分类合理，导航清晰
    各个网页内容具有相关性。-->
<!--    头部-->
	<div class="nav">
	<div class="nav_li" style="display: flex;">
		<div style="margin: 15px 0 5px 25px;"><img src="./images/logo.jpg" style="width: 150px;"></div>
    <ul>
        <li><a href="index.html">首页</a></li>
		<li><a href="city.html">家乡城市</a></li>
        <li><a href="history.html">家乡历史</a></li>
        <li><a href="celebrity.html">家乡建筑</a></li>
        <li><a href="building.html">家乡名人</a></li>
		<li><a href="weizhi.html">家乡位置</a></li>
        <li><a href="头部跟底部.html" class="item">家乡美食</a></li>
    </ul>
	</div>
	</div>

<!--    内容-->

    <main class="p-4">
        <div class="container" style="border-radius: 10px;height: 400px;">
            <div id="demo" class="carousel slide" data-ride="carousel"
                 style="width: 100%;height: 100%;">
                <!-- 指示符 -->
                <ul class="carousel-indicators" style="background: transparent">
                    <li data-target="#demo" data-slide-to="0" class="active"></li>
                    <li data-target="#demo" data-slide-to="1"></li>
                    <li data-target="#demo" data-slide-to="2"></li>
                </ul>

                <!-- 轮播图片 -->
                <div class="carousel-inner">
                    <div class="carousel-item active" style="height: 400px;">
                        <img src="./images/bg-11.jpg">
                    </div>
                    <div class="carousel-item" style="height: 400px;">
                        <img src="./images/bg-13.jpg">
                    </div>
                    <div class="carousel-item" style="height: 400px;">
                        <img src="./images/bg-1.webp">
                    </div>
                </div>

                <!-- 左右切换按钮 -->
                <a class="carousel-control-prev" href="#demo" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#demo" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>

            </div>

        </div>
    </main>

    <h3 class="h3">河南之旅</h3>

    <main class="mt-3">
        <div class="container">
            <div class="row">
                <div class="col-4 my-3 h_vto">
                    <div class="p-3 border">
                        <div style="height: 200px;overflow:hidden;">
                            <img src="./images/bg-17.jpg" style="width: 100%;height: 200px;">
                        </div>
                        <p class="mt-3"><strong>山水之间</strong></p>

                        <div  class="mt-3" style="display:flex;justify-content: space-between;">
                            <span  style="font-size: 14px;">来之河南洛阳</span>
                            <span  style="font-size: 14px;">阅读量:999+</span>
                        </div>

                     </div>
                </div>

                <div class="col-4 my-3 h_vto">
                    <div class="p-3 border">
                        <div style="height: 200px;overflow:hidden;">
                            <img src="./images/bg-11.jpg" style="width: 100%;height: 200px;">
                        </div>
                        <p class="mt-3"><strong>繁华人间</strong></p>

                        <div  class="mt-3" style="display:flex;justify-content: space-between;">
                            <span  style="font-size: 14px;">来之河南古城</span>
                            <span  style="font-size: 14px;">阅读量:321</span>
                        </div>

                    </div>
                </div>

                <div class="col-4 my-3 h_vto">
                    <div class="p-3 border">
                        <div style="height: 200px;overflow:hidden;">
                            <img src="./images/bg-12.jpg" style="width: 100%;height: 200px;">
                        </div>
                        <p class="mt-3"><strong>夜色小港</strong></p>

                        <div  class="mt-3" style="display:flex;justify-content: space-between;">
                            <span  style="font-size: 14px;">来之河南开封</span>
                            <span  style="font-size: 14px;">阅读量:999+</span>
                        </div>

                    </div>
                </div>

                <div class="col-4 my-3 h_vto">
                    <div class="p-3 border">
                        <div style="height: 200px;overflow:hidden;">
                            <img src="./images/bg-13.jpg" style="width: 100%;height: 200px;">
                        </div>
                        <p class="mt-3"><strong>夜市</strong></p>

                        <div  class="mt-3" style="display:flex;justify-content: space-between;">
                            <span  style="font-size: 14px;">来之河南</span>
                            <span  style="font-size: 14px;">阅读量:999+</span>
                        </div>

                    </div>
                </div>

                <div class="col-4 my-3 h_vto">
                    <div class="p-3 border">
                        <div style="height: 200px;overflow:hidden;">
                            <img src="./images/bg-14.jpg" style="width: 100%;height: 200px;">
                        </div>
                        <p class="mt-3"><strong>桶子鸡</strong></p>

                        <div  class="mt-3" style="display:flex;justify-content: space-between;">
                            <span  style="font-size: 14px;">来之河南洛阳</span>
                            <span  style="font-size: 14px;">阅读量:999+</span>
                        </div>

                    </div>
                </div>

                <div class="col-4 my-3 h_vto">
                    <div class="p-3 border">
                        <div style="height: 200px;overflow:hidden;">
                            <img src="./images/bg-15.jpg" style="width: 100%;height: 200px;">
                        </div>
                        <p class="mt-3"><strong>老君山</strong></p>

                        <div  class="mt-3" style="display:flex;justify-content: space-between;">
                            <span  style="font-size: 14px;">来之河南老君山</span>
                            <span  style="font-size: 14px;">阅读量:999+</span>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </main>

    <h3 class="h3">河南美食</h3>

    <main class="my-3">
        <div class="container my-4">
            <div class="row p-4" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
                <div class="col-6">

                    <span class="pb-2" style="border-bottom: 5px solid #000;font-size: 22px;font-weight: 600">桶子鸡</span>
                    <p style="text-indent: 2em" class="mt-4">
                        筒子鸡属鲁菜中胶东菜，以皮脆肉嫩出名，气血双补调理、月经不调调理、肢寒畏冷调理、营养不良调理。此菜鸡肉肥美，五香味浓，是佐酒佳肴。
                    </p>
                    <p style="text-indent: 2em" class="mt-4">桶子鸡是河南省开封市的一道传统特色名菜，属于豫菜；以其色泽鲜黄，咸香嫩脆，肥而不腻，
                        越嚼越香几大特点而出名；其主料是鸡，主要烹饪工艺是煮。老母鸡的补益之功效更高，许多久病、
                        瘦弱之人用来补身，尤其是畏寒风重，虚不受补者，老母鸡不但能补气补血，还可祛风。</p>

                </div>
                <div class="col-6" style="display: flex;justify-content: center;">
                        <div style="width: 260px;overflow:hidden;">
                            <img src="./images/ms1.jpg" alt="" style="width: 100%;height: 100%; transform: scale(1.1);">
                        </div>
                </div>
            </div>
        </div>
        <div class="container my-4">
            <div class="row p-4" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
                <div class="col-6">
                    <span class="pb-2" style="border-bottom: 5px solid #000;font-size: 22px;font-weight: 600">胡辣汤</span>
                    <p style="text-indent: 2em" class="mt-4">
                        胡辣汤既要美味，又要最能体现河南特色的豫菜，非胡辣汤莫属。基本上全河南都有卖胡辣汤的，但绝不是随便哪一家都好喝的。胡辣汤的“少林派”，是逍遥镇胡辣汤。逍遥胡辣汤看起来相对透亮，味道香辣。逍遥镇上的胡辣汤店往往提供几种不同...
                    </p>   <p style="text-indent: 2em" class="mt-4">
                    胡辣汤的“少林派”，是逍遥镇胡辣汤。逍遥胡辣汤看起来相对透亮，味道香辣。逍遥镇上的胡辣汤店往往提供几种不同档次的汤，供食客选择。我前次去的时候，最贵的“金汤”是10元一碗。
                    </p>

                </div>
                <div class="col-6" style="display: flex;justify-content: center;">
                    <div style="width: 260px;overflow:hidden;">
                        <img src="./images/ms2.jpg" alt="" style="width: 100%;height: 100%; transform: scale(1.1);">
                    </div>
                </div>
            </div>
        </div>
    </main>

    <main class="text-center my-5">
        <a href="#" style="font-weight: 700;font-size: 18px;color: #005cbf!important;"> 更多 &nbsp;&nbsp;&nbsp;》》》》</a>
    </main>
<!--    底部-->
    <footer id="footer" class="pt-3 border-top" style="background: #015293;">
        <div class="container">
            <div class="row" style="height: 200px;">
                <div class="col-12 f_1 text-center" style="color: #fff;height: 40px;line-height: 40px;">
                        <a style="color: #ffff!important;" href="http://www.moe.gov.cn/" target="_blank">教育部</a>|
                        <a style="color: #fff!important;"  href="http://edu.sh.gov.cn/" target="_blank">上海市教育委员会</a>|
                        <a style="color: #fff!important;"  href="http://www.gench.cn/" target="_blank">上海建桥集团</a>|
                        <a style="color: #fff!important;"  href="http://swuni.shnet.edu.cn/Home.aspx" target="_blank">西南片高校联合办学</a>|
                        <a style="color: #fff!important;"  href="http://www.cauas.cn" target="_blank">应用技术大学（学院）联盟</a>|
                        <a style="color: #fff!important;"  href="https://www.lgxc.gov.cn/" target="_blank">中国（上海）自贸实验区...</a>
                </div>
                <div class="col-12  ml-5" style="color: #fff;font-size: 12px;display: flex;justify-content: space-between;">
                    <p class="copyright" style="font-size: 14px;">
                        上海建桥学院有限责任公司 <br>学校地址：上海市浦东新区沪城环路1111号  &nbsp;
                        邮编：201306  &nbsp;电子邮箱：SJQU@gench.edu.cn
                        <br>电话：
                        021-58137788(学校办公室）&nbsp;
                        021-58137880
                        （招生办公室)
                    </p>
                    <img src="./images/log.png" alt="">
                </div>
                <div class="col-12 text-center" style="font-size: 14px;color: #fff!important;">
                    本人作品：学号2122436 姓名杜思雨
                </div>
            </div>
        </div>
    </footer>
</body>
</html>